<!DOCTYPE html>
<html>

<head>
	{include file="common/meta" /}

	<style type="text/css">
		body {
			color: #999;
			/* background-color: #f1f4fd; */
			background-size: 100% 100%;
			background-image: url('__CDN__/assets/img/login-bg.png');
		}

		a {
			color: #444;
		}

		.login-screen {
			/* max-width: 430px; */
			padding: 0;
			margin: 30px auto 0 auto;
			display: flex;
			justify-content: space-between;
		}

		.login-screen .well {
			-webkit-box-shadow: 0px 6px 12px 4px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 6px 12px 4px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 1);
			border: none;
			overflow: hidden;
			padding: 0;
			width: 440px;
			max-width: 440px;
		}

		@media (max-width: 767px) {
			.login-screen {
				padding: 0 20px;
			}
		}

		.profile-img-card {
			width: 100px;
			height: 100px;
			display: block;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			margin: -93px auto 30px;
			border: 5px solid #fff;
		}

		.profile-name-card {
			text-align: center;
			font-size: 22px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
		}

		.login-form {
			padding: 60px 40px 50px 40px;
			position: relative;
			z-index: 99;
		}

		#login-form {
			margin-top: 20px;
		}

		#login-form .input-group {
			margin-bottom: 30px;
			border-radius: 4px;
			border: 1px solid #ccc;
			overflow: hidden;
		}

		#login-form .form-control {
			font-size: 14px;
			border: none;
		}

		.topNav {
			width: 100%;
			height: 120px;
			padding: 60px 0;
			background-color: transparent;
			font-size: 30px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #fff;
			text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
		}

		.topNav img {
			width: 77px;
			height: 77px;
			margin: 0 20px 0 60px;
		}

		.infosContent {
			width: 100%;
			height: calc(100vh - 120px);

			display: flex;
			align-items: center;
		}

		.login-screen {
			margin: 30px 0 0 auto;
		}

		.input-group-addon .img {
			width: 18px;
			height: 18px;
		}

		.input-group .input-group-addon {
			border: none;
			padding: 6px 0px 6px 15px;
		}

		.login-text {
			display: inline-block;
			font-size: 50px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 90px;
			text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
		}

		.login-text .tips {
			font-size: 28px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 45px;
			text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
		}

		/* .login-wrapper {} */
	</style>
	<!--@formatter:off-->
	{if $background}
	<style type="text/css">
		body {
			background-image: url('{$background}');
		}
	</style>
	{/if}
	<!--@formatter:on-->
</head>

<body>
	<div class="topNav">
		<img src="__CDN__/assets/img/logo.png" alt="">{$site.name|htmlentities}管理系统
	</div>
	<div class="infosContent">
		<div class="container">
			<div class="login-wrapper">

				<div class="login-screen">
					<div class='login-text'>
						<div>Hi,你好！<br>欢迎登录{$site.name|htmlentities}管理系统</div>
						<div class='tips'>Welcome to the management system</div>
					</div>
					<div class="well">
						<div class="login-form">
							<p id="profile-name" class="profile-name-card">请登录</p>

							<form action="" method="post" id="login-form">
								<!--@AdminLoginFormBegin-->
								<div id="errtips" class="hide"></div>
								{:token()}
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
									</div>
                                    <input type="text" class="form-control" id="mobile" placeholder="{:__('Username')}" name="mobile" autocomplete="off" value="" data-rule="{:__('Username')}:required;mobile"/>

								</div>
                                <div class="input-group">
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
        
                                    <input type="text" name="code" class="form-control" data-rule="required;length({$Think.config.captcha.length});digits;remote({:url('api/validate/check_sms_correct')}, event=login, mobile:#mobile)" />
                                    <span class="input-group-btn" style="padding:0;border:none;">
                                        <a href="javascript:;" class="btn btn-info btn-captcha" data-url="/api/sms/send" data-type="mobile" data-event="login">发送验证码</a>
                                    </span>
                                </div>
								<!-- <div class="input-group">
									<div class="input-group-addon"><span class="glyphicon glyphicon-lock"
											aria-hidden="true"></span></div>
									<input type="password" class="form-control" id="pd-form-password"
										placeholder="{:__('Password')}" name="password" autocomplete="off" value=""
										data-rule="{:__('Password')}:required;password" />
								</div> -->
								<!--@CaptchaBegin-->
								{if $Think.config.fastadmin.login_captcha}
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
									</div>
									<input type="text" name="captcha" class="form-control"
										placeholder="{:__('Captcha')}"
										data-rule="{:__('Captcha')}:required;length({$Think.config.captcha.length})"
										autocomplete="off" />
									<span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">
										<img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100"
											height="30"
											onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();" />
									</span>
								</div>
								{/if}
								<!--@CaptchaEnd-->
								<div class="form-group checkbox">
									<label class="inline" for="keeplogin">
										<input type="checkbox" name="keeplogin" id="keeplogin" value="1" />
										{:__('Keep login')}
									</label>
								</div>
								<div class="form-group">
									<button type="submit" class="btn btn-success btn-lg btn-block"
										style="background:#0086FF;">{:__('Sign in')}</button>
								</div>
								<!--@AdminLoginFormEnd-->
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	{include file="common/script" /}
</body>

</html>
<script src="__CDN__/assets/js/require-frontend.min.js"></script>